<template>
    <view class="bottom">
        <view class="bottom-cont">
            <view class="">
                <view class="bottom-left">
                    <view class="bottom-txt1">订单金额：</view>
                    <view class="bottom-txt1">￥{{ seatsPrice }}</view>
                </view>
                <view class="bottom-left">
                    <view class="bottom-txt">应付金额：</view>
                    <view class="bottom-price">￥{{ dedPrice }}</view>
                </view>
            </view>
            <view class="bottom-right">
                <view class="bottom-btn">
					<!-- #ifdef  H5 -->
                    <x-btn text="提交订单" class="bottom-btn" @click="payClick"></x-btn>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<u-button type="warning" shape="circle" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">提交订单</u-button>
					<!-- #endif -->
				</view>
            </view>
        </view>
    </view>
</template>

<script>
import xBtn from '@/sub_pages/movie/components/x-btn/x-btn.vue';
import { loginByWechat } from '@/sub_pages/movie/common/api/movie.js';
export default {
    components: { xBtn },
    props: {
        seatsPrice: {
            type: [Number, String],
            default: 0,
        },
        dedPrice: {
            type: String,
            default: '',
        },
    },
    methods: {
		getPhoneNumber(e) {
			let _this = this;
			if (e.detail.errMsg == "getPhoneNumber:ok") {
				uni.login({
					"provider": "weixin",
					"onlyAuthorize": true, // 微信登录仅请求授权认证
					success: function(event) {
						const {code} = event
						_this.login(code, e.detail.encryptedData, e.detail.iv);
					}
				})
			}
		},
		async login(code, encryptedData, iv) {
			let res = await loginByWechat({
				'code': code,
				'encryptedData': encryptedData,
				'iv': iv
			});
			uni.setStorageSync('userInfo', JSON.stringify(res.data));
			this.$emit('click');
		},
        payClick() {
			this.$emit('click');
        },
    },
};
</script>

<style lang="scss" scoped>
.bottom {
    height: 120rpx;
    &-cont {
        position: fixed;
        z-index: 1;
        width: 100%;
        box-sizing: border-box;
        padding: 0 30rpx;
        height: 120rpx;
        background-color: #fff;
        bottom: 0;
        left: 0;
        @include flexCenterBetween;
        box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(0, 0, 0, 0.05);
    }
    &-left {
        @include flexCenter;
        &:first-child {
            text-decoration: line-through;
        }
    }
    &-txt {
        @include font(28rpx, #101010);
    }
    &-price {
        @include font(38rpx, #ff8600, bold);
    }
    &-txt1 {
        @include font(22rpx, #999);
    }
    &-right {
        width: 248rpx;
    }
    &-btn {
        width: 248rpx;
        height: 78rpx;
        background: linear-gradient(90deg, #FF8600 0%, #DDA244 100%);
        border-radius: 50rpx;
        @include font(30rpx, #ffffff, bold);
    }
}
</style>
